.upload-imgs-wrap {
  box-sizing: border-box;

  .upload-list {
    display: flex;
    flex-wrap: wrap;

    dd {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f0f2;
      border: 1px solid #F2F6FC;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #c0ccda;
      margin: 0 8px 8px 0;

      img {
        max-width: 100%;
        max-width: 100%;
      }

      .img-mask {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 666;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0,0,0,.5);
        color: #ffffff;
        opacity: 0;

        .mask-btn {
          font-size: 1.2em;
          cursor: pointer;

          &:hover {
            color: #2db7f5;
          }
        }
      }

      &:hover .img-mask {
        opacity: 1;
      }
    }
  }
}

:host ::ng-deep .upload-btn {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  
  .ant-upload.ant-upload-select-picture-card {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
}

// Drag
.cdk-drag-preview {
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;

  img {
    max-width: 100%;
    max-width: 100%;
  }

  .img-mask {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 666;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.5);
    color: #ffffff;
    opacity: 1;

    .mask-btn {
      font-size: 1.2em;
      cursor: pointer;
    }
  }
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-custom-placeholder {
  box-sizing: border-box;
  background: #ccc;
  border: dotted 2px #999;
  border-radius: 6px;
  margin: 0 8px 8px 0;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}